import React, { Component } from "react";
import { showYTKAlert, alertDispatchFn } from "@/utils/index"
import { SubmitApi } from "@/request/api.js"

import "./Wenda.less"
import { connect } from "react-redux";
class Wenda extends Component {
  state = {
    ifShowAnswer: false,
    // 用户输入的内容
    answer: "",
    dir: {
      all: "全部",
      qa: "问答",
      code: "编程",
      fill: "填空",
      one: "单选",
      check: "判断",
      many: "多选"
    }

  }
  render() {
    // console.log(this.props.actionCode.actionCode);
    // console.log("this.props为：", this.props);
    let timu = this.props.timu;
    // console.log(timu);
    return (
      <div style={{ display: this.props.zuJian ? "block" : "none" }}>
        <div
          className="wenda"
          style={{ display: "block" }}

        >
          <div className="timu_title">
            <span>{this.state.dir[this.props.timu.questionType]}</span>
            <p>{this.props.timu.title}</p>
          </div>
          <div dangerouslySetInnerHTML={{ __html: this.props.timu.content }}></div>
          {/* <div dangerouslySetInnerHTML={{__html:"<p>这是富文本的内容</p>"}}></div> */}
          <textarea className="timu_textarea" placeholder="请输入内容" value={this.state.answer} onChange={this.hdChanFn.bind(this)}></textarea>
          <p className="timu_tips">此类型的题目暂不支持打分，按正确记分。</p>
          <div className="timu_submit" onClick={this.submitFn.bind(this, this.props.timu.id, this.props.timu.categoryCode)}>确认</div>

          <div className="timu_answer">
            <span>答案：</span>
            <div style={{ display: this.state.ifShowAnswer ? "block" : "none" }} dangerouslySetInnerHTML={{ __html: this.props.timu.answer || "<div>这是富文本的内容</div>" }}></div>
          </div>
          <div className="timu_answer timu_analysis">


          </div>
        </div>
      </div>

    );
  }
  hdChanFn(e) {
    console.log(e.target.value);
    this.setState({
      answer: e.target.value
    })
  }
  submitFn(id, categoryCode) {
    // 提交答案
    SubmitApi({
      categoryCode,
      actionType: "exam_test",
      userAnswer: this.state.answer,
      actionCode: this.props.actionCode.actionCode,
      id
    }).then(res => {
      if (res.errCode === 0) {
        // 给出提示，提交成功
        showYTKAlert(this.props, "success", "提交成功");
        // 显示答案
        this.setState({
          isShowAnswer: true
        })
      }
    })

    //点击确认提交

    if (!this.state.answer) {
      return showYTKAlert(this.props, "warning", "内容不能为空")

    }
    this.setState({
      ifShowAnswer: true
    })
  }
}
const mapDispatchToProps = dispatch => {
  return {
    ...alertDispatchFn(dispatch)
  }
}

export default connect(null, mapDispatchToProps)(Wenda)